<template>
  <div class="masking">
    <!-- 左============================================== -->
    <div class="left">
      <!-- 左上  -->
      <div class="left_up">
        <!-- 总体情况 -->
        <div class="overall_situation">
          <div class="overall_situation_title">
            <span class="overall_situation_title_graph">■</span>
            <span class="overall_situation_title">总体情况</span>
          </div>
          <div class="overall_situation_content">
            <div class="overall_situation_left">
              <img src="@/image/图标.png" alt="">
            </div>
            <div class="overall_situation_right">
              <div class="overall_situation_right_up"><span>在建项目</span></div>
              <div class="overall_situation_right_down">178 <span>个</span></div>
            </div>
          </div>
        </div>
        <!-- 安全情况 -->
        <div class="security_situation">
          <div class="overall_situation_title">
            <span class="overall_situation_title_graph">■</span>
            <span class="overall_situation_title">安全情况</span>
          </div>
          <div class="security_situation_content">
            <div class="security_situation_content_1">
              <div class="security_situation_content_1_up"><span>危大工程总数</span></div>
              <div class="security_situation_content_1_number">678</div>
              <div class="security_situation_content_1_circle"><img src="@/image/图标.png" alt=""></div>
            </div>
            <div class="security_situation_content_2">
              <div class="security_situation_content_2_up"><span>在建深基坑数量</span></div>
              <div class="security_situation_content_2_number">125</div>
              <div class="security_situation_content_2_circle"><img src="@/image/图标.png" alt=""></div>
            </div>
            <div class="security_situation_content_3">
              <div class="security_situation_content_3_up"><span>起重设备数量</span></div>
              <div class="security_situation_content_3_number">519</div>
              <div class="security_situation_content_3_circle"><img src="@/image/图标.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 左中  -->
      <div class="left_center">
        <div class="left_center_title title1">
          形象进度
        </div>
        <div class="left_center_chart">
          <span>图表</span>
        </div>
      </div>

      <!-- 左下  -->
      <div class="left_bottom">
        <div class="left_bottom_title title1">
          监督履职
        </div>
        <div class="left_bottom_chart">
          <span>图表</span>
        </div>
      </div>
    </div>

    <!-- 右============================================== -->
    <div class="right">
      <!-- 右上  -->
      <div class="right_up">
        <!-- 总体情况 -->
        <div class="overall_situation">
          <div class="overall_situation_title">
            <span class="overall_situation_title_graph">■</span>
            <span class="overall_situation_title">问题整改</span>
          </div>
          <div class="overall_situation_content">
            <div class="overall_situation_content_1">
              <div class="overall_situation_left">
                <img src="@/image/图标.png" alt="">
              </div>
              <div class="overall_situation_right">
                <div class="overall_situation_right_up"><span>整改中</span></div>
                <div class="overall_situation_right_down">282 <span>个</span></div>
              </div>
            </div>
            <div class="overall_situation_content_2">
              <div class="overall_situation_left">
                <img src="@/image/图标.png" alt="">
              </div>
              <div class="overall_situation_right">
                <div class="overall_situation_right_up"><span>已逾期</span></div>
                <div class="overall_situation_right_down">72 <span>个</span></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 安全情况 -->
        <div class="security_situation">
          <div class="overall_situation_title">
            <span class="overall_situation_title_graph">■</span>
            <span class="overall_situation_title">问题分类</span>
          </div>
          <div class="security_situation_content">
            <div class="security_situation_content_1">
              <div class="security_situation_content_1_circle"><img src="@/image/图标.png" alt=""></div>
              <div class="security_situation_content_1_up"><span>工程质量</span></div>
            </div>
            <div class="security_situation_content_2">
              <div class="security_situation_content_2_circle"><img src="@/image/图标.png" alt=""></div>
              <div class="security_situation_content_2_up"><span>安全生产</span></div>
            </div>
            <div class="security_situation_content_3">
              <div class="security_situation_content_3_circle"><img src="@/image/图标.png" alt=""></div>
              <div class="security_situation_content_3_up"><span>文明施工</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右中  -->
      <div class="right_center">
        <div class="right_center_title title1">
          近6个月整改工单趋势
        </div>
        <div class="right_center_chart">
          <span>图表</span>
        </div>
      </div>

      <!-- 右下  -->
      <div class="right_bottom">
        <div class="right_bottom_title title1">
          问题最多单位排名前20
        </div>
        <div class="right_bottom_chart">
          <span>图表</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { router } from "@/router";
import { computed, defineComponent, onMounted, provide, watch, ref, reactive } from "vue";
export default defineComponent({
  name: "Home",

  setup() {




    return {

    };
  },
});
</script>
<style scoped>
.masking {
  /* position: relative; */
  background-color: rgba(23, 32, 51);
}

span {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

img {
  width: 100%;
  height: 100%;
}

.title1 {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

/* 左侧内容 */
.left,
.right {
  width: 450px;
  height: 935px;
}

.left {
  float: left;
  /* background-image: url('~@/assets/background_frame_left.png');
  background-repeat: no-repeat;
  background-position: center; */
  margin-left: 20px;
}

/* 左上--------------------------- */
.left .left_up {
  border: 1px solid rgba(58, 66, 85, 0.4);
  padding: 15px 20px;
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

/* 总体情况------ */
.left .overall_situation_title_graph {
  font-size: 30px;
  /* color: #808ebe; */
  color: red;
  margin-right: 10px;
}

.left .overall_situation_content {
  display: flex;
  justify-content: flex-start;
}

.left .overall_situation_left {
  width: 60px;
  height: 60px;
}

.left .overall_situation_right {
  margin-left: 10px;
}

.left .overall_situation_right_down {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

/* 安全情况-------------- */
.left .security_situation_content {
  display: flex;
  justify-content: space-around;
}

.left .security_situation_content_1,
.left .security_situation_content_2,
.left .security_situation_content_3 {
  text-align: center;
  width: 120px;
}

.left .security_situation_content_1_up,
.left .security_situation_content_2_up,
.left .security_situation_content_3_up {
  background-color: rgba(48, 57, 106, 0.4);
  border-top: 1px solid rgba(48, 57, 106, 1);
  border-bottom: 1px solid rgba(48, 57, 106, 1);
  line-height: 26px;
}

.left .security_situation_content_1_number,
.left .security_situation_content_2_number,
.left .security_situation_content_3_number {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  ;
}

.left .security_situation_content_1_circle,
.left .security_situation_content_2_circle,
.left .security_situation_content_3_circle {
  width: 80px;
  height: 40px;
  margin: 0 auto;
}

/* 左中--------------------------- */
.left .left_center {
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

.left .left_center_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid rgba(58, 66, 85, 1);
  background-image: linear-gradient(to right, rgb(103, 110, 133, 1), rgb(69, 78, 99, 0.5), rgb(245, 80, 4, 0));
  padding-left: 20px;
  margin-bottom: 10px;
}

.left .left_center_chart {
  width: 100%;
  height: 260px;
  background-color: rgba(23, 32, 51, 0.4);
  border: 1px solid rgba(58, 66, 85, 1);
}



/* 左下--------------------------- */
.left .left_bottom {
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

.left .left_bottom_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid rgba(58, 66, 85, 1);
  background-image: linear-gradient(to right, rgb(103, 110, 133, 1), rgb(69, 78, 99, 0.5), rgb(245, 80, 4, 0));
  padding-left: 20px;
  margin-bottom: 10px;
}

.left .left_bottom_chart {
  width: 100%;
  height: 260px;
  background-color: rgba(23, 32, 51, 0.4);
  border: 1px solid rgba(58, 66, 85, 1);
}


/* 右 =========================================== */
.right {
  float: right;
  margin-right: 20px;
}

/* 右上--------------------------- */
.right .right_up {
  border: 1px solid rgba(58, 66, 85, 0.4);
  padding: 15px 20px;
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

/* 总体情况------ */
.right .overall_situation_title_graph {
  font-size: 30px;
  /* color: #808ebe; */
  color: red;
  margin-right: 10px;
}
.overall_situation_content{
  display: flex;
  justify-content: space-between;
}
.right .overall_situation_content_1,
.right .overall_situation_content_2 {
  display: flex;
  justify-content: flex-start;
}

.right .overall_situation_left {
  width: 60px;
  height: 60px;
}

.right .overall_situation_right {
  margin-left: 10px;
}

.right .overall_situation_right_down {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

/* 安全情况-------------- */
.right .security_situation_content {
  display: flex;
  justify-content: space-around;
}

.right .security_situation_content_1,
.right .security_situation_content_2,
.right .security_situation_content_3 {
  text-align: center;
  width: 120px;
}
.right .security_situation_content_1_number,
.right .security_situation_content_2_number,
.right .security_situation_content_3_number {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  ;
}

.right .security_situation_content_1_circle,
.right .security_situation_content_2_circle,
.right .security_situation_content_3_circle {
  width: 80px;
  height: 40px;
  margin: 0 auto;
}

/* 右中--------------------------- */
.right .right_center {
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

.right .right_center_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid rgba(58, 66, 85, 1);
  background-image: linear-gradient(to right, rgb(103, 110, 133, 1), rgb(69, 78, 99, 0.5), rgb(245, 80, 4, 0));
  padding-left: 20px;
  margin-bottom: 10px;
}

.right .right_center_chart {
  width: 100%;
  height: 260px;
  background-color: rgba(23, 32, 51, 0.4);
  border: 1px solid rgba(58, 66, 85, 1);
}



/* 右下--------------------------- */
.right .left_bottom {
  background-color: rgba(23, 32, 51, 0.2);
  margin-bottom: 20px;
}

.right .right_bottom_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid rgba(58, 66, 85, 1);
  background-image: linear-gradient(to right, rgb(103, 110, 133, 1), rgb(69, 78, 99, 0.5), rgb(245, 80, 4, 0));
  padding-left: 20px;
  margin-bottom: 10px;
}

.right .right_bottom_chart {
  width: 100%;
  height: 260px;
  background-color: rgba(23, 32, 51, 0.4);
  border: 1px solid rgba(58, 66, 85, 1);
}
</style>